<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="wrap">
        <div class="title">学生系统</div>
        <div id="form">
            <p>姓名<input id="username" type="text" value="张三123" /></p>
            <p>年龄<input id="age" type="text" value="21" /></p>
            <p>性别
                <select id="gender">
                    <option>男</option>
                    <option>女</option>
                    <option>你猜</option>
                </select>
            </p>
            <p>
                <input type="button" value="添加" id="addBtn" />
                <input type="button" value="排序" id="sortBtn" />
            </p>
        </div>
        <table id="table">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>

    <script>
        // 数据驱动 ： 先操作数据，然后再渲染视图 
        var usernameEle = document.querySelector("#username");
        var ageEle = document.querySelector("#age");
        var genderEle = document.querySelector("#gender");
        var addBtn = document.querySelector("#addBtn");
        var tbodyEle = document.querySelector("tbody")
        // 获取排序按钮
        var sortBtn = document.querySelector("#sortBtn");
        // onclick是元素对象的方法 ，不是数组方法；如果是伪数组 需要循环在绑定onclick方法
        var arr = [];
        sortBtn.onclick = function(){
            // console.log("点击了排序按钮");
            // 把数据做排序操作
            // 把arr 通过 age 来进行排序 
            arr.sort(function(a,b){
                return a.age - b.age;
            })
            console.log("排序好的arr数据是:",arr);
            renderDom(arr);
        }

        
        addBtn.onclick = function(){
            var username = usernameEle.value;
            var age = ageEle.value;
            var gender = genderEle.value;
            // 在点击的时候 创建一个 arr 对象数组出来
            arr.push({
                username:username,
                age:age,
                gender:gender
            })
            console.log(arr);
            renderDom(arr);
        }


        // 数据驱动 ，数据优先
        // {name:"学员",data:[{username:"zhangsan"},{username:"zhangsan"}]}
        // var arr = [{
        //     username:"张三1",
        //     age:20,
        //     gender:"男"
        // },{
        //     username:"张三2",
        //     age:25,
        //     gender:"男"
        // }]

        // 能不能通过数据 显示对应的tr ；
        function renderDom(data){
            // 每次渲染的时候把之前的tbody里的内容清空掉
            tbodyEle.innerHTML = "";

            data.forEach(function(item,key){
                // 根据数据创建tr标签
                var trEle = document.createElement("tr");
                // tr里的td内容就是 循环出来每一个对象里的内容信息
                trEle.innerHTML = "<td>"+item.username+"</td><td>"+item.age+"</td><td>"+item.gender+"</td><td class='del'>删除</td>";
                var delBtn = trEle.querySelector(".del");
                delBtn.onclick = function(){
                    // console.log("点击了删除");
                    // this.parentNode.remove();
                    // 先删除数据里的内容 在渲染视图 
                    // console.log(key);
                    arr.splice(key,1);
                    console.log(arr);
                    renderDom(arr);
                }
                tbodyEle.appendChild(trEle);
            })
        }

        // renderDom(arr);

        // arr = ["张三","李四"，“王五”];
        // splice

    //    var myarr = ["张三","李四","王五"];
    //               0       1     2
    //    myarr.splice(1,1);
    //  var res =   myarr.slice(0,2);  // 包头不包尾 包前不包后
    //   console.log(res);

       
    </script>
</body>

</html>